<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/layui/2.11.2/css/layui.min.css">
</head>
<style>
    .zong {
        width: 730px;
        height: 630px;
        background-color: aliceblue;
        margin: auto;
        position: relative;
    }

    .yi {
        box-sizing: border-box;
        width: 250px;
        height: 300px;
        background-color: white;
        position: absolute;
        left: 10px;
        top: 10px;
        padding-top: 10px;
    }

    .er {
        width: 420px;
        height: 300px;
        background-color: white;
        position: absolute;
        right: 10px;
        top: 10px;

    }

    .er1 {
        width: 420px;
        height: 300px;
    }

    .san {
        width: 335px;
        height: 280px;
        background-color: white;
        position: absolute;
        left: 10px;
        bottom: 10px;
    }

    .san1 {
        width: 335px;
        height: 280px;
    }

    .si {
        width: 335px;
        height: 280px;
        background-color: white;
        position: absolute;
        right: 10px;
        bottom: 10px;
    }

    .si1 {
        width: 335px;
        height: 280px;
    }

    li {
        list-style: none;
        margin: 10px;
        font-size: 15px;
        position: relative;
    }

    h3 {
        margin: 0;
        font-weight: 500;
    }

    ul {
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
    }

    .tu {
        width: 40px;
        height: 40px;
        text-align: center;
        line-height: 40px;
        display: inline-block;
    }

    .di1 {
        width: 180px;
        font-size: 13px;
        display: inline-block;
    }

    .di2 {
        position: absolute;
        bottom: 0px;
        left: 43px;
        font-size: 10px;
    }

    .er>select {
        position: absolute;
        top: 7px;
        right: 0px;
        z-index: 999;
        border-radius: 5px;
        color: rgb(147, 147, 147);
    }

    .san>select {
        position: absolute;
        top: 5px;
        right: 5px;
        z-index: 999;
        border-radius: 5px;
        color: rgb(147, 147, 147);
    }

    .si>select {
        position: absolute;
        top: 25px;
        right: 10px;
        z-index: 999;
        border-radius: 5px;
        color: rgb(147, 147, 147);
    }

    .layui-icon-folder {
        font-size: 15px;
    }

    .layui-timeline-item {
        padding-bottom: 10px;
    }
</style>

<body>
    <div class="zong">
        <div class="yi">
            <div class="layui-timeline">
                <div class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis layui-icon-folder"></i>
                    <div class="layui-timeline-content layui-text">
                        <div class="layui-timeline-title">公司员工守则</div>
                        <div class="layui-timeline-title">2025.12.2</div>
                    </div>
                </div>
                <div class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis layui-icon-folder"></i>
                    <div class="layui-timeline-content layui-text">
                        <div class="layui-timeline-title">关于交易手续费优惠政策的通知</div>
                        <div class="layui-timeline-title">2025.10.10</div>
                    </div>
                </div>
                <div class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis  layui-icon-folder"></i>
                    <div class="layui-timeline-content layui-text">
                        <div class="layui-timeline-title">国庆节安排通知</div>
                        <div class="layui-timeline-title">2025.9.30</div>
                    </div>
                </div>
                <div class="layui-timeline-item">
                    <i class="layui-icon layui-timeline-axis layui-icon-folder"></i>
                    <div class="layui-timeline-content layui-text">
                        <div class="layui-timeline-title">618促销日：满5000送500</div>
                        <div class="layui-timeline-title">2025.6.18</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="er">
            <div class="er1" id="er"></div>
            <select id="chart-select">
                <option value="option1">最近6个月</option>
                <option value="option2">最近7个月</option>
                <option value="option3">最近8个月</option>
            </select>
        </div>
        <div class="san">
            <div class="san1" id="san"></div>
            <select id="chart-select">
                <option value="option1">本周</option>
                <option value="option2">本月</option>
                <option value="option3">本季</option>
            </select>
        </div>
        <div class="si">
            <div class="si1" id="si"></div>
            <select id="chart-select">
                <option value="option1">本月</option>
                <option value="option2">本季</option>
                <option value="option3">本年</option>
            </select>
        </div>
    </div>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/layui/2.11.2/layui.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.6.0/dist/echarts.min.js"></script>
    <script type="text/javascript">
        $.ajax({
            type: 'get',
            url: 'https://www.zzgoodqc.cn/index.php/index/index/getOrders',
            data: {},
            dataType: 'json',
            success: (a) => {
                var shuju = a.data
                console.log(shuju);
                // 基于准备好的dom，初始化echarts实例
                var myChart1 = echarts.init(document.getElementById('er'));
                var myChart2 = echarts.init(document.getElementById('san'));
                var myChart3 = echarts.init(document.getElementById('si'));
                // 指定图表的配置项和数据
                var option1 = {
                    title: {
                        text: '订单统计趋势图'
                    },
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    legend: {
                        data: ['总金额', '订单数']
                    },
                    toolbox: {
                        feature: {
                            saveAsImage: {}
                        }
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    xAxis: [
                        {
                            type: 'category',
                            boundaryGap: false,
                            data: ['4月', '5月', '6月', '7月', '8月', '9月']
                        }
                    ],
                    yAxis: [
                        {
                            type: 'value'
                        }
                    ],
                    series: [
                        {
                            name: '订单数',
                            type: 'line',
                            stack: 'Total',
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: shuju.arr
                        },
                        {
                            name: '总金额',
                            type: 'line',
                            stack: 'Total',
                            label: {
                                show: true,
                                position: 'top'
                            },
                            areaStyle: {},
                            emphasis: {
                                focus: 'series'
                            },
                            data: shuju.list
                        }
                    ]
                };
                var option2 = {
                    title: [{
                        text: '253090',
                        subtext: '总销售',
                        left: 'center',
                        top: 'center'
                    }, {
                        text: '订购商品数',
                        left: 0,
                        top: 0
                    }],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'cross',
                            label: {
                                backgroundColor: '#6a7985'
                            }
                        }
                    },
                    series: [
                        {
                            type: 'pie',
                            data: [
                                {
                                    value: 4260,
                                    name: '今日'
                                },
                                {
                                    value: 3970,
                                    name: '比昨日'
                                },
                                {
                                    value: 3454,
                                    name: '本周'
                                },
                                {
                                    value: 2390,
                                    name: '上周'
                                }
                            ],
                            radius: ['40%', '70%']
                        }
                    ]
                };
                var option3 = {
                    title: {
                        text: '订单数'
                    },
                    legend: {
                        Try: 'horizontal',
                        // orient: 'vertical',
                        right: 10,
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    dataset: {
                        source: [
                            ['product', '比昨日', '上周同期', '上月同期'],
                            ['11.7', 30, 46, 89],
                            ['11.8', 26, 89, 30],
                            ['11.9', 30, 46, 89],
                            ['11.10', 89, 26, 89],
                            ['11.11', 46, 89, 30],
                            ['11.12', 72.4, 53.9, 39.1]
                        ],
                        position: {
                            top: '30px'
                        }
                    },
                    xAxis: { type: 'category' },
                    yAxis: {},
                    series: [{ type: 'bar' }, { type: 'bar' }, { type: 'bar' }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart1.setOption(option1);
                myChart2.setOption(option2);
                myChart3.setOption(option3);
            },
            error: (e) => {
                console.log(e);

            }
        })
    </script>
</body>

</html>